<!doctype html>
<html lang="en">

	<head>
		<meta charset="UTF-8" />
		<meta http-equiv="X-UA-Compatible" content="chrome=1">
    	<meta name="viewport" content="initial-scale=1.0, user-scalable=no, width=device-width">
		<title>首页</title>
		<link rel="stylesheet" type="text/css" href="css/style.css" />
		<link rel="stylesheet" type="text/css" href="css/bootstrap.min.css" />
		<link rel="stylesheet" type="text/css" href="css/jquery.page.css" />
	</head>

	<body>
		<div id="bj">
			<!--登录-->
			<div id="denglu">
				<div id="d-header">
					<p><span id="">欢迎登录360同城帮</span><span id="closs">X</span></p>
				</div>
				<div id="d-main">
					<table border="0" cellspacing="0" cellpadding="">
						<tr>
							<td align="right">账&nbsp;&nbsp;号</td>
							<td><input type="text" name="" id="user" value="" placeholder="手机号/用户名/邮箱" /></td>
						</tr>
						<tr>
							<td align="right">密&nbsp;&nbsp;码</td>
							<td><input type="password" name="" id="mm" value="" placeholder="请输入您的密码" /></td>
						</tr>
						<tr>
							<td></td>
							<td><input type="checkbox" name="" id="jz" value="" />下次自动登录</td>
						</tr>
						<tr>
							<td></td>
							<td><input type="button" name="" id="btn1" value="立即登录" /></td>
						</tr>
						<tr>
							<td></td>
							<td>
								<p id="t-1">其它账号登录：<img src="" /></p>
							</td>
						</tr>
					</table>
				</div>
				<div id="d-footer">
					<p>注册新账号丨<a href="#">忘记密码</a></p>
				</div>
			</div>
			<!--注册-->
			<div id="zhuce">
				<div id="z-header">
					<p><span id="">欢迎注册360同城帮</span><span id="z-closs">X</span></p>
				</div>
				<div id="z-main">
					<table border="0" cellspacing="0" cellpadding="">
						<tr>
							<td align="right">账&nbsp;&nbsp;号</td>
							<td><input type="text" name="" id="z-user" value="" placeholder="" /></td>
						</tr>
						<tr>
							<td></td>
							<td id="td1" style="padding-left: 30px;">1</td>
						</tr>
						<tr>
							<td align="right">密&nbsp;&nbsp;码</td>
							<td><input type="password" name="" id="z-mm" value="" placeholder="" /></td>
						</tr>
						<tr>
							<td></td>
							<td id="td2" style="padding-left: 30px;">2</td>
						</tr>
						<tr>
							<td align="right">验证码</td>
							<td><input type="text" name="" id="yzm" value="" placeholder="" /><span id="yzmt">4567</span><span id="gh">换一张</span></td>
						</tr>
						<tr>
							<td></td>
							<td id="td3" style="padding-left: 30px;">1</td>
						</tr>

						<tr>
							<td></td>
							<td><input type="button" name="" id="btn2" value="立即注册" /></td>
						</tr>
						<tr>
							<td></td>
							<td><input type="checkbox" name="" id="z-jz" value="" />我已阅读并同意<a href="#">《360用户服务条款》</a></td>
						</tr>
					</table>
				</div>
				<div id="z-footer">
					<p>已有账号丨<a href="###">立即登录</a></p>
				</div>
			</div>
		</div>

		<!--在线客服-->
		<div id="chat">
			<div id="c-header">
				<img src="https://img.sobot.com/console/741e6f02f6794194967e733576170632/robotlogo/20160830121335456.png" />
				<dl>
					<dt>机器人帮帮</dt>
					<dd>同城帮服务</dd>
				</dl>
				<span id="c-closs">X</span>
			</div>
			<div id="c-main">
			</div>
			<div id="c-footer">
				<br />
				<textarea name="" rows="" cols="" placeholder="请简要陈述您的问题">
					
				</textarea>
				<p>Powered by 智齿客服<button id="tjwt">发送</button></p>
			</div>
		</div>
		<!--投诉建议-->
		<div id="tousu">
			<p id="t-p1">投诉建议<span id="t-closs">X</span></p>
			<br />
			<p id="t-p2">您好，如对我们的服务意见或建议，请发邮件至：tcb-fankui@bang.360.cn 详细说明</p>
			<button id="t-qd">确定</button>
		</div>
		<div id="header">
			<div id="city">
				<p>城市列表<button id="l-closs">关闭X</button></p>
				<div id="city-1">
					<h4>热门</h4>
					<p id="c-hot"></p>
				</div>
				<div id="city-2">
					<h4>拼音</h4>
					<p id="py"><span>A</span><span>B</span><span>C</span><span>D</span><span>E</span><span>F</span><span>G</span><span>H</span><span>J</span><span>K</span><span>M</span><span>L</span><span>M</span><span>N</span><span>P</span><span>Q</span><span>R</span><span>S</span><span>T</span><span>W</span><span>X</span><span>S</span><span>Y</span><span>Z</span></p>
				</div>
				<div id="city-3">
					<p id="city-4"></p>
				</div>
			</div>
			<div id="navs">
				<p><span>北京</span>&nbsp;&nbsp;<a href="###" id="cslb">[切换城市]</a>&nbsp;丨&nbsp;<a href="###">同城帮首页</a></p>
				<ul>
					<li style="border: none;"><a href="###" id="dl">登录</a></li>
					<li><a href="###" id="zc">注册</a></li>
					<li><a href="###">我的订单</a></li>
					<li><a href="###" id="zxkf">在线客服</a>(9:00-21:00)</li>
					<li><a href="###">客户服务</a></li>
					<li><a href="###">论坛</a></li>
					<li><a href="###" style="color: red;" id="tsjy">投诉建议</a></li>
				</ul>
			</div>
		</div>
		<div id="logo">
			<div id="daohang">
				<img src="images/18.png" />
				<ul>
					<li style="border: none;"><a href="" style="text-decoration:none;">二手优品</a></li>
					<li><a href="" style="text-decoration:none;">手机回收</a></li>
					<li><a href="" style="text-decoration:none;">手机维修</a></li>
					<li><a href="" style="text-decoration:none;">电脑维修</a></li>
					<li><a href="" style="text-decoration:none;">以旧换新</a></li>
					<li><a href="" style="text-decoration:none;">手机租用</a></li>
				</ul>
			</div>
		</div>
		<div id="lunbo">
			<ul id="tab-list">
				<li><img src="images/3.png" /><span class="span1">修手机/pad</span><span class="glyphicon glyphicon-menu-right span2"></span></li>
				<li><img src="images/4.png" /><span class="span1">修电脑</span><span class="glyphicon glyphicon-menu-right span2"></span></li>
				<li><img src="images/25.png" /><span class="span1">卖手机/电脑</span><span class="glyphicon glyphicon-menu-right span2"></span></li>
				<li><img src="images/26.png" /><span class="span1">买二手机</span><span class="glyphicon glyphicon-menu-right span2"></span></li>
			</ul>
			<div id="xsj" class="a1">
				<!--<p><span class="q1"></span></p>-->
			</div>
			<div id="xdn" class="a1">
				<div id="xdn1">
					<h5>热门问题</h5>
					<p></p>
				</div>
				<div id="xdn2">
					<h5>其他问题</h5>
					<p></p>
				</div>
			</div>
			<div id="msj" class="a1">
				<p></p>
			</div>
			<div id="messj" class="a1">
				<p></p>
			</div>
			<div id="carousel-example-generic" class="carousel slide" data-ride="carousel">
				<!-- Indicators -->
				<ol class="carousel-indicators" id="lb">
					<li data-target="#carousel-example-generic" data-slide-to="0" class="active"></li>
					<li data-target="#carousel-example-generic" data-slide-to="1"></li>
					<li data-target="#carousel-example-generic" data-slide-to="2"></li>
				</ol>

				<!-- Wrapper for slides -->
				<div class="carousel-inner" role="listbox">
					<div class="item active">
						<img src="images/2.png" alt="">
					</div>
					<div class="item">
						<img src="images/3.jpg" alt="">
					</div>
					<div class="item">
						<img src="images/4.jpg" alt="">
					</div>
				</div>

				<!-- Controls -->
				<a class="left carousel-control" href="#carousel-example-generic" role="button" data-slide="prev">
					<span class="glyphicon glyphicon-chevron-left" aria-hidden="true"></span>
					<span class="sr-only">Previous</span>
				</a>
				<a class="right carousel-control" href="#carousel-example-generic" role="button" data-slide="next">
					<span class="glyphicon glyphicon-chevron-right" aria-hidden="true"></span>
					<span class="sr-only">Next</span>
				</a>
			</div>
		</div>
		<div id="main-z">
			<img src="images/1.jpg" />
			<img src="images/8.jpg" />
			<img src="images/11.jpg" />
			<img src="images/15.png" />
		</div>
		<div class="tit">
			<h2>热门手机回收</h2>
			<span class="s">查看更多<span class="glyphicon glyphicon-menu-right s1"></span></span>
		</div>
		<div id="rm" class="tp1">
			<a href="#"><img src="images/29.png" /></a>
			<!--<a href="#"><img src="images/11.png"/></a>-->
			<!--<a href="#"><img src="images/11.png"/></a>-->
			<!--<a href="#"><img src="images/11.png"/></a>
			<a href="#"><img src="images/11.png"/></a>
			<a href="#"><img src="images/11.png"/></a>-->
		</div>
		<div class="tit">
			<h2>热门手机回收</h2>
			<span class="s">查看更多<span class="glyphicon glyphicon-menu-right s1"></span></span>
		</div>
		<div id="yp" class="tp1">
			<a href="###"><img src="images/32.png" /></a>
			<!--<a href="#"><img src="images/10.png"/></a>
			<a href="#"><img src="images/10.png"/></a>
			<a href="#"><img src="images/10.png"/></a>
			<a href="#"><img src="images/10.png"/></a>
			<a href="#"><img src="images/10.png"/></a>-->
		</div>
		<div class="tit">
			<h2>到店维修</h2>
		</div>
		<div id="wx">
			<div id="main">
				<div id="ditu">
				<p>地图模式<span id="dt-closs">X</span></p>
				<div id="container">
					
				</div>
				<div id="page1">
					
				</div>
				</div>
				<div id="main-l">
					<div id="xuanze">
						<p class="p1"><span>北京</span>&nbsp;&nbsp;<span class="glyphicon glyphicon-triangle-bottom"></span></p>
						<p class="p1"><span>选择区县</span>&nbsp;&nbsp;<span class="glyphicon glyphicon-triangle-bottom"></span></p>
						<p class="p2"><input type="text" name="" id="sr" value="" placeholder="输入您的位置查找附近的商家" /><span id="">搜索</span></p>
					</div>
					<div id="fenlei">
						<div id="f-l">
							<ul>
								<li class="white">默认排序</li>
								<li>按成交量</li>
								<li>按人气</li>
							</ul>
							<p><input type="checkbox" name="" id="" value="" />先行赔付</p>
						</div>
						<div id="f-r">
							<p>
								<a href="###" id="dtss"><img src="https://p.ssl.qhimg.com/t01c9ef4268ff127a67.png" />地图模式</a>
							</p>
						</div>
					</div>
					<div id="shop">
						<div class="shop">
							<div class="s-l">
								<img src="images/20.jpg" />
								<dl>
									<dt><span>顺通电脑维修</span>&nbsp;电脑等级：</dt>
									<dd>主营：阿达阿打算阿萨德阿萨德阿斯达所阿萨德阿萨德碍事</dd>
									<dd>地址：阿萨德阿萨德阿达是个富商大贾水电费水电费</dd>
								</dl>
							</div>
							<div class="s-r">
								<dl>
									<dt>先行赔付</dt>
									<dd>同城帮认证</dd>
									<dd>人气：5616511次浏览</dd>
								</dl>
								<p>进入店铺</p>
							</div>
						</div>
						<div class="shop">
							<div class="s-l">
								<img src="images/20.jpg" />
								<dl>
									<dt><span>顺通电脑维修</span>&nbsp;电脑等级：</dt>
									<dd>主营：阿达阿打算阿萨德阿萨德阿斯达所阿萨德阿萨德碍事</dd>
									<dd>地址：阿萨德阿萨德阿达是个富商大贾水电费水电费</dd>
								</dl>
							</div>
							<div class="s-r">
								<dl>
									<dt>先行赔付</dt>
									<dd>同城帮认证</dd>
									<dd>人气：5616511次浏览</dd>
								</dl>
								<p>进入店铺</p>
							</div>
						</div>
						<div class="shop">
							<div class="s-l">
								<img src="images/20.jpg" />
								<dl>
									<dt><span>顺通电脑维修</span>&nbsp;电脑等级：</dt>
									<dd>主营：阿达阿打算阿萨德阿萨德阿斯达所阿萨德阿萨德碍事</dd>
									<dd>地址：阿萨德阿萨德阿达是个富商大贾水电费水电费</dd>
								</dl>
							</div>
							<div class="s-r">
								<dl>
									<dt>先行赔付</dt>
									<dd>同城帮认证</dd>
									<dd>人气：5616511次浏览</dd>
								</dl>
								<p>进入店铺</p>
							</div>
						</div>
						<div class="shop">
							<div class="s-l">
								<img src="images/20.jpg" />
								<dl>
									<dt><span>顺通电脑维修</span>&nbsp;电脑等级：</dt>
									<dd>主营：阿达阿打算阿萨德阿萨德阿斯达所阿萨德阿萨德碍事</dd>
									<dd>地址：阿萨德阿萨德阿达是个富商大贾水电费水电费</dd>
								</dl>
							</div>
							<div class="s-r">
								<dl>
									<dt>先行赔付</dt>
									<dd>同城帮认证</dd>
									<dd>人气：5616511次浏览</dd>
								</dl>
								<p>进入店铺</p>
							</div>
						</div>
						<div class="shop">
							<div class="s-l">
								<img src="images/20.jpg" />
								<dl>
									<dt><span>顺通电脑维修</span>&nbsp;电脑等级：</dt>
									<dd>主营：阿达阿打算阿萨德阿萨德阿斯达所阿萨德阿萨德碍事</dd>
									<dd>地址：阿萨德阿萨德阿达是个富商大贾水电费水电费</dd>
								</dl>
							</div>
							<div class="s-r">
								<dl>
									<dt>先行赔付</dt>
									<dd>同城帮认证</dd>
									<dd>人气：5616511次浏览</dd>
								</dl>
								<p>进入店铺</p>
							</div>
						</div>
					</div>
					<div id="page">

					</div>
				</div>
				<div id="main-r">
					<div id="hp">
						<h2>商家好评榜</h2>
						<div id="dianpu">
							<div class="dianpu">
								<p>①</p>
								<img src="images/2.jpg" />
								<dl>
									<dt>店铺名</dt>
									<dd>321326条评论</dd>
								</dl>
							</div>
							<div class="dianpu">
								<p>②</p>
								<img src="images/2.jpg" />
								<dl>
									<dt>店铺名</dt>
									<dd>321326条评论</dd>
								</dl>
							</div>
							<div class="dianpu">
								<p>③</p>
								<img src="images/2.jpg" />
								<dl>
									<dt>店铺名</dt>
									<dd>321326条评论</dd>
								</dl>
							</div>
							<div class="dianpu">
								<p style="color: #666;">④</p>
								<img src="images/2.jpg" />
								<dl>
									<dt>店铺名</dt>
									<dd>321326条评论</dd>
								</dl>
							</div>
							<div class="dianpu">
								<p style="color: #666;">⑤</p>
								<img src="images/2.jpg" />
								<dl>
									<dt>店铺名</dt>
									<dd>321326条评论</dd>
								</dl>
							</div>
							<div class="dianpu">
								<p style="color: #666;">⑥</p>
								<img src="images/2.jpg" />
								<dl>
									<dt>店铺名</dt>
									<dd>321326条评论</dd>
								</dl>
							</div>
							<div class="dianpu">
								<p style="color: #666;">⑦</p>
								<img src="images/2.jpg" />
								<dl>
									<dt>店铺名</dt>
									<dd>321326条评论</dd>
								</dl>
							</div>
						</div>
					</div>
				</div>
			</div>
		</div>
		<div id="footer">
			<div id="ft1">
				<dl>
					<dt><img src="images/16.png"/></dt>
					<dd>
						<h4>购物指南</h4></dd>
					<dd>购物流程</dd>
					<dd>用户注册</dd>
					<dd>帮助文档</dd>
				</dl>
				<dl>
					<dt><img src="images/21.png"/></dt>
					<dd>
						<h4>购物指南</h4></dd>
					<dd>购物流程</dd>
					<dd>用户注册</dd>
					<dd>帮助文档</dd>
				</dl>
				<dl>
					<dt><img src="images/22.png"/></dt>
					<dd>
						<h4>购物指南</h4></dd>
					<dd>购物流程</dd>
					<dd>用户注册</dd>
					<dd>帮助文档</dd>
				</dl>
				<dl>
					<dt><img src="images/23.png"/></dt>
					<dd>
						<h4>购物指南</h4></dd>
					<dd>购物流程</dd>
					<dd>用户注册</dd>
					<dd>帮助文档</dd>
				</dl>
				<dl>
					<dt><img src="images/23.png"/></dt>
					<dd>
						<h4>购物指南</h4></dd>
					<dd>购物流程</dd>
					<dd>用户注册</dd>
					<dd>帮助文档</dd>
				</dl>
			</div>
			<p style="margin-top:30px;">客服电话：4000-399-360 / 010-53767360&nbsp;&nbsp; 投诉建议&nbsp;&nbsp;网站地图
			</p>
			<p>Copyright&copy;2005-2014 360.CN All Right Reserved 360安全中心</p>
			<p>京ICP备08010314号-19 京公网安备110000000006号</p>
		</div>

	</body>

	<script src="js/jquery-3.1.1.min.js" type="text/javascript" charset="utf-8"></script>
	<script src="js/bootstrap.js" type="text/javascript" charset="utf-8"></script>
	<script src="js/dianji.min.js" type="text/javascript" charset="utf-8"></script>
	<script src="js/ajax.min.js" type="text/javascript" charset="utf-8"></script>
	<script src="js/baiduTemplate.js" type="text/javascript" charset="utf-8"></script>
	<script src="js/jquery.page.min.js" type="text/javascript" charset="utf-8"></script>
	<script type="text/javascript" src="http://webapi.amap.com/maps?v=1.3&key=544e65a7e9e11d0b0a4f4bb04b06e8c8"></script>
	<script src="js/ditu.min.js" type="text/javascript" charset="utf-8"></script>
		
	<!--获取商家店铺数据-->
	<script type="text/template" id="mb1">
		<%for(var i = 0;i <shop_data.length;i++){%>
		<div class="shop">
			<div class="s-l">
				<img src="<%=shop_data[i].shop_ico%>" />
				<dl>
					<dt><span><%=shop_data[i].shop_name%></span>&nbsp;电脑等级：</dt>
					<dd> 主营：
						<%=shop_data[i].main%>
					</dd>
					<dd> 地址：
						<%=shop_data[i].addr_detail%>
					</dd>
				</dl>
			</div>
			<div class="s-r">
				<dl>
					<dt> 先行赔付 </dt>
					<dd> 同城帮认证 </dd>
					<dd> 人气：
						<%=shop_data[i].shop_visit%>次浏览 </dd>
				</dl>
				<p> 进入店铺 </p>
			</div>
		</div>
		<%}%>
	</script>
	<script type="text/javascript">
		var xhr = new XMLHttpRequest();
		xhr.open("GET", "http://localhost:2333/data/weixiu1.json", true)
		xhr.send()
		xhr.onreadystatechange = function() {
			if (xhr.readyState == 4) {
				if (xhr.status == 200) {
					var obj = JSON.parse(xhr.responseText)
					shop.innerHTML = baidu.template("mb1", obj)
//					console.log(obj)
				}
			}
		}
		$(function() {
			$("#page").Page({
				totalPages: 8, //分页总数
				liNums: 3, //分页的数字按钮数(建议取奇数)
				activeClass: 'activP', //active 类样式定义
				callBack: function(page) {
					var xhr = new XMLHttpRequest();
					xhr.open("GET", "http://localhost:2333/data/shangdian/dianpu" + page + ".json", true)
					xhr.send()
					xhr.onreadystatechange = function() {
						if (xhr.readyState == 4) {
							if (xhr.status == 200) {
								var obj = JSON.parse(xhr.responseText)
								shop.innerHTML = baidu.template("mb1", obj)
//								console.log(obj)
							}
						}
					}
				}
			})
		})
	</script>

</html>